<template>
  <div style="width: 100%">
    <!-- <div class="flex justify-between px-6">
      <span class="text-2xl ">申报列表 </span>
      <el-button type="primary" @click="toDeclareList">
        新增项目表单
      </el-button>
    </div> -->
    <div class="px-6 py-4 overflow-x-auto">
      <table class="m-table-form">
        <thead>
          <th v-for="item in thList" :key="item.id">
            {{ item.name }}
          </th>
        </thead>
        <tbody class="m-table-tbody">
          <tr v-for="(item, index) in declareList" :key="index">
            <td class="label" style="width: 5rem">{{ item.id }}</td>
            <td class="label" style="width: 15rem">
              <span
                class="cursor-pointer hover:text-blue-400"
                @click="previewFile(item.pdfFilePath)"
                v-if="item.status != 3 && item.declareType != 0"
              >
                {{ item.dictLabel }}
              </span>
              <a
                v-if="item.status == 3 || item.declareType == 0"
                :href="'/policyDeclare/policyDetail/' + item.relationPolicyId"
                class="hover:text-blue-500"
                >{{ item.dictLabel }}</a
              >
            </td>
            <td class="label">{{ item.declareTime }}</td>
            <td class="label">{{ item.deptName }}</td>
            <!-- 状态判断 先判断declareType 0-草稿 1-提交 如果当前为草稿 则申报状态只有草稿，审核记录隐藏，操作只有编辑 -->
            <td
              v-if="item.declareType != 0"
              class="label"
              :class="statusDeclare(item.status).color"
            >
              {{ statusDeclare(item.status).name }}
            </td>
            <td v-if="item.declareType == 0" class="label text-gray-500">
              草稿
            </td>

            <td class="label text-blue-500">
              <span
                class="cursor-pointer hover:text-blue-400"
                @click="showDialog(item)"
                v-if="item.declareType != 0"
              >
                查看
              </span>
              <span v-else></span>
            </td>
            <td class="label text-blue-500">
              <span
                class="cursor-pointer hover:text-blue-400"
                @click="handleExamine(item)"
                v-if="item.status == 0 && item.declareType != 0"
              >
                申请回退
              </span>
              <span
                v-if="item.status == 3 || item.declareType == 0"
                class="ml-1 cursor-pointer hover:text-blue-400"
                @click="handleDeclareEdit(item)"
              >
                编辑
              </span>
              <span
                class="cursor-pointer hover:text-blue-400"
                @click="previewFile(item.pdfFilePath)"
                v-if="item.declareType != 0"
              >
                查看
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- pdf浏览弹窗 -->
    <el-dialog
      title="pdf预览( 若无展示，请确认申报内容有所保存 )"
      :visible.sync="showPdf"
      width="80%"
      class="pdf-dialog"
    >
      <iframe
        :src="'/pdf/web/viewer.html?file=' + pdfUrl"
        frameborder="1"
        height="100%"
        width="100%"
        style="margin-top: 0.25rem"
      ></iframe>
    </el-dialog>

    <!-- 审核记录弹窗 -->
    <el-dialog
      title="审核记录"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
      class="examine-dialog"
    >
      <div class="px-4 py-0 declareInfo-box">
        <template v-for="(item, index) in declareInfo">
          <div
            class="
              mt-8
              py-1
              pb-6
              flex flex-col
              justify-between
              border-b border-dotted border-gray-400
              declareInfo-item
            "
            :key="'declareInfo' + index"
            v-if="!item.type || item.type !== 5"
          >
            <div class="text-base flex justify-between">
              <div class="font-bold">
                {{ item.deptName }}的{{ item.name }}的审核意见为:
              </div>
              <span class="text-t999 text-sm">{{ item.createTime }}</span>
            </div>
            <div class="pt-2 font-bold">
              【操作类型】:
              <span :class="statusDeclare(item.type).color">{{
                statusDeclare(item.type).name
              }}</span>
            </div>
            <div
              class="mt-4 pb-14 pt-2 px-2 border"
              style="background-color: rgba(220, 238, 246, 1)"
            >
              {{ item.remark ? item.remark : "暂无" }}
            </div>
          </div>
        </template>
      </div>
    </el-dialog>
    <!-- END -->
  </div>
</template>

<script>
import {
  getDeclareList,
  getAuditStatus,
  updateDeclareStatus,
} from "@/api/declareList";

export default {
  name: "enterpriseDeclare",
  computed: {
    statusDeclare() {
      return (stausId) => {
        let resArr = "";
        this.statusTypeList.forEach((item) => {
          if (item.id == stausId) {
            resArr = item;
          }
        });
        return resArr;
      };
    },
  },
  data() {
    return {
      pdfUrl: "",
      showPdf: false,
      statusTypeList: [
        {
          id: 0,
          name: "待审核",
          color: "text-gray-500",
          borderColor: "border-gray-500",
        },
        {
          id: 1,
          name: "已审核",
          color: "text-green-500",
          borderColor: "border-green-500",
        },
        {
          id: 2,
          name: "需退回",
          color: "text-red-500",
          borderColor: "border-red-500",
        },
        {
          id: 3,
          name: "已驳回",
          color: "text-red-500",
          borderColor: "border-red-500",
        },
        {
          id: 4,
          name: "已受理",
          color: "text-green-500",
          borderColor: "border-green-500",
        },
      ],
      thList: [
        { id: 0, name: "序号" },
        { id: 1, name: "项目名称" },
        { id: 2, name: "起止时间" },
        { id: 3, name: "推荐部门" },
        { id: 4, name: "申报状态" },
        { id: 5, name: "审核记录" },
        { id: 6, name: "操作" },
      ],

      declareTypeList: [],
      declareList: [],

      // 审核记录查看
      dialogVisible: false,
      // 审核记录信息
      declareInfo: [],
    };
  },
  created() {
    this.getDicts("unicorn_field_option").then((res) => {});
    this.initDeclareList();
  },
  methods: {
    // 每次在审核弹窗启动时将滚动条重置于顶端
    resetScrollTop() {
      this.$nextTick(() => {
        document.querySelector(".declareInfo-box").scrollTop = 0;
      });
    },

    // 显示审核记录
    showDialog(item) {
      getAuditStatus(item.id).then((res) => {
        this.declareInfo = res.data;
        this.dialogVisible = true;
        this.resetScrollTop();
      });
    },

    // 关闭审核记录
    handleClose(done) {
      this.dialogVisible = false;
      done();
    },

    // 申请回退
    handleExamine(item) {
      this.$confirm("确定回退吗?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          updateDeclareStatus({ id: item.id, status: 2 }).then((res) => {
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.initDeclareList();
          });
        })
        .catch(function () {});
    },

    previewFile(url) {
      // this.pdfUrl = 'http://' + window.location.host + process.env.VUE_APP_BASE_API + '/file/' + url
      if (!url) {
        this.$message({
          type: "error",
          message: "您还未保存过任何信息",
        });
        return;
      }
      this.showPdf = true;
      this.pdfUrl =
        "http://" +
        window.location.host +
        process.env.VUE_APP_BASE_API +
        "/file/" +
        url +
        "#zoom=page-width";

      // window.open("https://view.officeapps.live.com/op/view.aspx?src=" + url);
    },
    isOverNow(time) {
      let endTime = JSON.parse(JSON.stringify(time));
      if (endTime) {
        let lineDateStr = endTime.replace(/\./g, "/");
        let date = new Date(lineDateStr);
        let nowTime = new Date();
        let nowTimeChuo = nowTime.valueOf();
        let endTimeChuo = date.valueOf();
        if (nowTimeChuo >= endTimeChuo) {
          return false;
        } else {
          return true;
        }
      } else {
        return false;
      }
    },
    initDeclareList() {
      let that = this;
      getDeclareList().then((res) => {
        if (res.code == 200) {
          this.declareList = res.rows;

          let newList = [];
          this.declareList.forEach((item, index) => {
            newList[index] = {
              ...item,
              ...that.findDeclareRealItem(item.type),
            };
            newList[index]["typeId"] = newList[index]["id"];
            newList[index]["id"] = item.id;
          });

          this.declareList = newList;
        }
      });
    },
    findDeclareRealItem(type) {
      if (this.declareTypeList) {
        let resItem = {};

        this.declareTypeList.forEach((item) => {
          if (type == parseInt(item.dictValue)) {
            resItem = item;
          }
        });

        return resItem;
      } else {
        return "";
      }
    },
    // 打开编辑页面
    handleDeclareEdit(item) {
      // router并不支持弹出新窗口，所以使用resolve方式
      // let url = this.$router.resolve({
      //   path: "/user/enterprise/form",
      //   query: {
      //     id: item.id,
      //     typeId: item.type,
      //     declareIndex: 0,
      //     policyId: item.relationPolicyId,
      //   },
      // });
      // window.open(url.href, "_blank");
      this.$router.push({
        path: "/user/enterprise/form",
        query: {
          id: item.id,
          typeId: item.type,
          declareIndex: 0,
          policyId: item.relationPolicyId,
        },
      });
    },
    handleDeclareDelete(id) {},
    toDeclareList() {
      this.$router.push({ path: "/user/declareList" });
    },
  },
};
</script>

<style lang="scss" scoped>
.m-table-form {
  // width: 968px;
  width: 100%;
  min-height: auto;

  @apply m-auto mt-5;

  .m-table-tbody {
    overflow-x: auto;
  }

  .el-form-item {
    @apply mb-4;
  }
  .el-form-item__content {
    margin-left: 0 !important;
  }
  .el-input__inner,
  .el-textarea__inner {
    @apply rounded-none border-0 px-2;

    // &:focus {
    //   @apply border border-black text-black;
    // }
  }

  ::v-deep .el-input-group__append {
    border-width: 0;
    background-color: #fff;
  }

  .label {
    @apply font-bold text-center pb-2;
  }

  th {
    background-color: #efefef;
  }

  td,
  th {
    border: none;
    border-bottom: 1px solid #ececec;

    @apply py-4;
  }
}

/** pdf弹窗高度控制 */
.pdf-dialog {
  height: 100%;

  ::v-deep .el-dialog {
    height: 80vh;

    .el-dialog__body {
      height: 92%;
    }
  }
}

/** 审核弹窗高度控制 */
.examine-dialog {
  ::v-deep .el-dialog {
    height: 80vh;
  }

  /** 审核记录盒内样式 */
  .declareInfo-box {
    width: calc(100% + 6px);
    height: 68vh;
    overflow-y: scroll;

    .declareInfo-item {
      &:first-child {
        @apply mt-0;
      }

      &:last-child {
        @apply border-0;
      }
    }
  }
}

@media screen and (max-width: 1501px) {
  /*<=1500的设备屏幕*/
  .m-table-form {
    width: 80rem /* 1280/16 */;
  }
}
</style>
